<template>
  <div class="main">
    <h3>动态发布</h3>
    <div>
      <el-upload ref="upload" v-model:file-list="fileList" action="#" list-type="picture-card"
        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :limit="3" 
        :auto-upload="false" :http-request="HTTPRequestimg" :on-change="Changeimglist">
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </div>
    <el-form ref="FormRef" :model="communityfrom" label-width="auto" style="max-width: 600px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="communityfrom.title" />
      </el-form-item>
      <el-form-item label="发表内容" prop="content">
        <el-input v-model="communityfrom.content" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">发布</el-button>
        <el-button @click="aaa">什么也没用的按钮不信你点一点</el-button>
        <el-button @click="resetForm(FormRef)">Reset</el-button>
      </el-form-item>
    </el-form>

  </div>


</template>

<script setup>
import { ref, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

import api from '@/api/index.js'




const router = useRouter() // 创建路由对象

const fileList = ref([]) // 文件上传列表{}
const upload = ref() // 文件上传列表{}

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const FormRef = ref(null)
const communityfrom = reactive({
  content: '',
  title: '',
})




const formDataParams = ref(new FormData()) // 表单数据对象


/**
 * 处理文件删除操作
 *
 * @param uploadFile 当前被删除的文件对象
 * @param uploadFiles 当前所有上传的文件对象数组
 */
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFiles)
}


/**
 * 处理图片预览功能
 *
 * @param uploadFile 上传的文件对象
 */
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true

}

const Changeimglist = (uploadFile,uploadFiles) => {
  console.log(uploadFiles)
  formDataParams.value.append('file', uploadFile.raw)
}


const HTTPRequestimg = () => {
  formDataParams.value.set('title', communityfrom.title)
  formDataParams.value.set('content', communityfrom.content)
  formDataParams.value.set('createtime', new Date().getTime())
  for (let [key, value] of formDataParams.value.entries()) {
    console.log(key, value);
  }
  api.community_create(formDataParams.value).then((res) => {
    if (res.data.code == 200) {
      // 初始化整个表单
      // fileList.value = [];
      formDataParams.value = new FormData()
      upload.value.clearFiles();
      console.log(upload.value);
      communityfrom.content = ''
      communityfrom.title = ''
      ElMessage({
        message: "发布成功",
        type: 'success',
      })
    } else {
      ElMessage.error(res.data.msg)
      router.push({ path: '/login' })
    }
  })

}


/**
 * 重置表单
 *
 * @param formEl 表单元素
 */
const resetForm = (formEl) => {
  formEl.resetFields()
  fileList.value = [];
}

/**
 * 表单提交事件处理函数
 *
 * 当表单提交时，会调用该函数
 */
const onSubmit = () => {
  HTTPRequestimg()
  console.log('submit!')
}

const aaa = () => {
  console.log('aaa')
  upload.value.clearFiles();
}

</script>

<style scoped></style>